<template>
  <div class="demo">
    <h1>store-state数据调用</h1>
    <p>state--{{ $store.state.name }}---{{ vuex_name }}</p>
    <p>
      user/state--{{ $store.state.user.userName }}---{{ vuex_user_userName }}
    </p>

    <hr />
    <h1>store-getters数据调用</h1>
    <p>
      getters-->>{{ $store.getters.userName }}---{{ vuex_getters_username }}
    </p>
    <p>
      user/getters--{{ $store.getters["user/user_getters_name"] }}---user下的{{
        vuex_user_getters_username
      }}
    </p>

    <hr />
    <h1>store-mutations数据调用</h1>
    <p>
      mutations--> <el-button @click="mutations_click">mutations</el-button>
    </p>

    <hr />
    <h1>store-actions 数据调用</h1>
    <p>actions--> <el-button @click="actions_click">actions</el-button></p>
  </div>
</template>

<script>
import { reactive, toRefs, defineAsyncComponent, computed } from "vue";
import { mapActions, mapMutations, useStore } from "vuex";
// const Com = defineAsyncComponent(() => import("./Children.vue"));
export default {
  name: "student_vuex",
  components: {},
  setup(props) {
    const store = useStore();
    const state = reactive({});
    console.log(store);
    //state
    const vuex_name = computed(() => store.state.name); // 主模块state
    const vuex_user_userName = computed(() => store.state.user.userName); // user模块state

    //getters
    const vuex_getters_username = computed(() => store.getters.userName);
    const vuex_user_getters_username = computed(
      () => store.getters["user/user_getters_name"]
    );

    // mutations
    const setUserInfo = store._mutations["user/setUserInfo"][0]; // 直接方式二

    // const { setUserInfo } = mapMutations("user", ["setUserInfo"]);

    const mutations_click = () => {
      //   console.log(store);
      console.log(setUserInfo);
      //   store.commit("setdata", "newname-457"); // 提交方法一
      //
      //   setdata("设置的新名字");
      setUserInfo({
        userName: "设置的新名字",
        userId: 789,
      });

      store.commit("user/setUserInfo", {
        userName: "设置的新名字",
        userId: 789,
      });
    };

    const asyncSetUserInfo = store._actions["user/setUserInfo"][0]; // 方式二

    const storeActions = mapActions("user", ["setUserInfo"]);

    const actions_click = () => {
      // 方式一
      store.dispatch("user/setUserInfo", {
        userName: "异步设置的新名字",
        userId: 111,
      });

      //
      //   asyncSetUserInfo({
      //     userName: "异步设置的新名字",
      //     userId: 111,
      //   });

      //
      //   console.log(storeActions.setUserInfo);
      //   storeActions.setUserInfo({
      //     userName: "异步设置的新名字",
      //     userId: 111,
      //   });
    };

    return {
      ...toRefs(state),
      vuex_name,
      vuex_user_userName,
      vuex_getters_username,
      vuex_user_getters_username,
      mutations_click,
      actions_click,
    };
  },
};
</script>

<style lang='scss' scoped>
</style>
